<script setup lang="ts">
import { articles } from '@/api/index'
import type { TarticlesItem } from '@/types/index'
import { ref, watch } from 'vue'

const props = defineProps<{
  currId: number
}>()
const list = ref<TarticlesItem[]>([])
const getData = async () => {
  const res = await articles({
    channel_id: props.currId,
    timestamp: Date.now()
  })
  list.value = res.data.data.results
}

// currId值修改后执行
watch(
  () => props.currId,
  () => {
    getData()
  }
)
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="i in list" :key="i.art_id">
      <p class="title">{{ i.title }}</p>
      <img v-for="(item, index) in i.cover.images" :key="index" class="img" :src="item" alt="" />
      <div class="info">
        <span>{{ i.aut_name }}</span>
        <span>{{ i.comm_count }}评论</span>
        <span>{{ i.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
